<template>
  <ContentWrap>
    <Search
      :schema="searchSchema"
      @reset="setSearchParams"
      @search="setSearchParams"
      @register="searchRegister"
    />
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      @refresh="refresh"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { useSearch } from '@/hooks/web/useSearch'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { reactive, ref, unref } from 'vue'
import { getLogPageListApi } from '@/api/log'
const { t } = useI18n()

const { searchRegister, searchMethods } = useSearch()
const { getFormData } = searchMethods
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const formData = await getFormData()
    const res = await getLogPageListApi({
      logType: 1,
      logContent: formData.logContent,
      page: { size: unref(pageSize), current: unref(currentPage) }
    })
    return {
      list: res.result.records || [],
      total: res.result.total
    }
  }
})
const { dataList, loading, total, currentPage, pageSize } = tableState
const { getList, refresh, delList, getElTableExpose } = tableMethods
const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'operateType',
    label: t('log.operateType')
  },
  {
    field: 'username',
    label: t('log.username')
  },
  {
    field: 'ip',
    label: t('log.ip')
  },
  {
    field: 'logContent',
    label: t('log.logContent')
  }
])
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'logContent',
    label: t('log.logContent'),
    component: 'Input'
  }
])
const searchParams = ref({})
const setSearchParams = (data: any) => {
  searchParams.value = data
  getList()
}
</script>
<style scoped></style>
